<template>
  <a-config-provider :locale="zhCN" :theme="{
    algorithm: theme.defaultAlgorithm,
    token: {
      colorPrimary: '#1677ff',
    },
    components: {
      Radio: {
        colorPrimary: '#00b96b',
      },
    },
  }">
    <router-view :key="$route.path" #="{ Component, route }">
      <transition name="fade-in" mode="out-in">
        <keep-alive>
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </a-config-provider>
</template>

<script setup name="App">
import { theme } from 'ant-design-vue';
import zhCN from 'ant-design-vue/lib/locale/zh_CN';
</script>

<style lang="scss" rel="stylesheet/scss" module="styles" scoped>
#app {
  padding-bottom: env(safe-area-inset-bottom);
}

.fade-in-enter-from,
.fade-in-leave-to {
  opacity: 0;
  transform: translateX(-2%);
}
</style>
